
<template>
  <div>
  <div class="div-wrapper photos-wrapper">
    <div class="container">
      <div class="title">
        {{$store.state.language === 'zh-CN' ? "照片墙" : "Photo"}}
      </div>
      <waterfall :list="Photoslist" :gutter="13" ref="waterfall">
        <template slot="item" slot-scope="props">
          <div class="water">
            <img
                :src="props.data.src"
                @load="$refs.waterfall.refresh()"
                style="width: 100%; height: 100%; object-fit: cover"
            />
          </div>
        </template>
      </waterfall>
    </div>
  </div>
    <Students />
    <Alumnus/>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import Alumnus from '../Alum.vue';
import Students from '../Students.vue';
import Waterfall from "vue-waterfall-plugin";

@Component({ components: { Waterfall, Alumnus, Students} })
export default class Photos extends Vue {
  private Photoslist: any[] = [];

  private mounted() {
    let list: any[] = [];
    for (let i = 1; i <= 8; i++) {
      let imgUrl = require(`../../assets/photo-wall-${i}.jpg`);
      list.push({ src: imgUrl });
    }
    this.Photoslist = list;
  }
}
</script>

<style lang="scss" scoped>

</style>